<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>

  <a-button ref="root" type="primary" @click="">
    Primary
  </a-button>
</template>

<script>
  import { reactive, computed, onMounted, ref } from 'vue'

  export default {
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      })

      const root = ref(null)

      onMounted(() => {
        // 在渲染完成后, 这个 div DOM 会被赋值给 root ref 对象
        console.log(root.value) // <div/>
      })

      function increment() {
        state.count++
      }

      return {
        root,
        state,
        increment,
      }
    }
  }
</script>
